<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>闪光按钮</title>
    <style>
      /*css样式*/
      :root {
        --btn-width: 15rem;
        --btn-height: 6rem;
        --btn-font-weight: 500;
        --btn-font-size: 1.5rem;
        --btn-border-radius: 0.5rem;
        --btn-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        --btn-gradient: linear-gradient(
          135deg,
          #165dff 0%,
          #722ed1 50%,
          #ff4d4f 100%
        );
        --btn-gradient-hover: linear-gradient(
          135deg,
          #165dff 0%,
          #722ed1 50%,
          #ff4d4f 100%
        );
        --shine-color: rgba(255, 255, 255, 0.8);
        --bg-color: #0f172a;
        --text-color: #f8fafc;
      }

      body {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-color: var(--bg-color);
        background-image: radial-gradient(
            circle at 10% 20%,
            rgba(22, 93, 255, 0.05) 0%,
            transparent 20%
          ),
          radial-gradient(
            circle at 90% 80%,
            rgba(114, 46, 209, 0.05) 0%,
            transparent 20%
          );
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 0;
      }

      /* 按钮基础样式 */
      .btn-base {
        width: var(--btn-width);
        height: var(--btn-height);
        line-height: var(--btn-height);
        color: var(--text-color);
        border-radius: var(--btn-border-radius);
        font-weight: var(--btn-font-weight);
        font-size: var(--btn-font-size);
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        display: inline-block;
        box-shadow: var(--btn-box-shadow);
        outline: none;
        overflow: hidden;
        letter-spacing: 1px;
        border: none;
      }

      .btn-shimmer {
        background: var(--btn-gradient);
        background-size: 200% 200%;
        animation: gradient-shift 8s ease infinite;
      }

      .btn-shimmer:hover {
        text-decoration: none;
        color: var(--text-color);
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(114, 46, 209, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.15),
          inset 0 -1px 0 rgba(0, 0, 0, 0.15);
      }

      .btn-shimmer:active {
        transform: translateY(1px);
        box-shadow: 0 2px 10px rgba(114, 46, 209, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          inset 0 -1px 0 rgba(0, 0, 0, 0.1);
      }

      .btn-shimmer::before {
        position: absolute;
        content: "";
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: var(--shine-color);
        animation: shiny-btn 3s ease-in-out infinite;
        filter: blur(2px);
      }

      @keyframes shiny-btn {
        0% {
          transform: scale(0) rotate(45deg);
          opacity: 0;
        }
        80% {
          transform: scale(0) rotate(45deg);
          opacity: 0.5;
        }
        81% {
          transform: scale(4) rotate(45deg);
          opacity: 1;
        }
        100% {
          transform: scale(50) rotate(45deg);
          opacity: 0;
        }
      }

      @keyframes gradient-shift {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      /* 按钮内文字效果 */
      .btn-text {
        position: relative;
        z-index: 10;
        background: linear-gradient(90deg, #e2e8f0, #f8fafc, #e2e8f0);
        background-size: 200% auto;
        animation: text-shimmer 3s linear infinite;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      @keyframes text-shimmer {
        to {
          background-position: 200% center;
        }
      }
    </style>
  </head>
  <body>
    <button class="btn-base btn-shimmer">
      <span class="btn-text">闪光按钮</span>
    </button>
  </body>
</html>
